<template>
	<view>
		<!-- <div>
			<div class='a'>
				<wuc-tab 
				 :tab-list="tabList2" 
				 :tabCur="TabCur2" 
				 @change="tabChange2" 
				 tab-class="text-center text-black bg-white"
				 select-class="text-blue text-xl"></wuc-tab>
			</div>
		</div> -->
		<!-- <view class="denglu" v-if="TabCur2 ==0">
			<view class="count">账号</view>
			<view class="username">
				<input type="text" v-model="account" placeholder="账号" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="secret">密码</view>
			<view class="secret_input" style="margin-bottom: 30rpx;">
				<input type="password" v-model="password" placeholder="密码" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<move-verify @result='verifyResult' ref="verifyElement"></move-verify>
			<view 
			 class="btn" 
			 :class="showBtnStatus?'active':''"
			 @click="login">登录</view>
			<view class="notice">
				登录注册代表您已阅读并同意《<text>用户协议</text>》
			</view>
		</view> -->
		<view class="self" v-if="TabCur2 ==1">
			<!-- <view class="count">账号</view>
			<view class="username">
				<input type="text" value="" placeholder="请输入用户名" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view> -->
			<view class="count">手机号</view>
			<view class="secret_input">
				<input class="account" 
				 type="text" 
				 value="" 
				 @input="onInput" 
				 @blur="blInput" 
				 clearable
				 v-model="account"
				 placeholder="请输入手机号" 
				 placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="count">验证码</view>
			<view class="code">
				<input 
				 type="text" 
				 value=""
				 v-model="smscode"
				 placeholder="请输入验证码" 
				 placeholder-style="color:#CCCCCC;font-size:28rpx" />
				<text 
				@click="bindGetCode">{{smsCodeTxt}}</text>
				<text v-if="!smsCodeStatus">{{smsCodeTxt}}</text>
			</view>
			<!-- <view class="secret">
				密码</view>
			<view class="secret_input">
				<input type="text" value="" placeholder="请输入密码" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="btn1">
				注册
			</view>
			<view class="notice">
				登录注册代表您已阅读并同意《<text>用户协议</text>》
			</view> -->
			<view
			 class="btn active" 
			 @click="login">登录</view>
		</view>
		<!-- <view class="company" v-if="TabCur2 ==2">
			<view class="count">企业名称</view>
			<view class="username">
				<input type="text" value="" placeholder="请输入企业名称" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="count">企业法人</view>
			<view class="username">
				<input type="text" value="" placeholder="请输入企业法人姓名" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="count">用户名</view>
			<view class="secret_input">
				<input type="text" value="" placeholder="请输入用户名" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="count">手机</view>
			<view class="secret_input">
				<input type="text" value="" class="account" @input="onInput" @blur="blInput" clearable v-model="account"
				 placeholder="请输入手机号" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="count">验证码</view>
			<view class="code">
				<input type="text" value="" placeholder="请输入验证码" placeholder-style="color:#CCCCCC;font-size:28rpx" />
				<text :class="[showBtnStatus ? 'active': '']" @tap="bindGetCode">获取验证码</text>
			</view>
			<view class="secret">密码</view>
			<view class="secret_input">
				<input type="text" value="" placeholder="请输入密码" placeholder-style="color:#CCCCCC;font-size:28rpx" />
			</view>
			<view class="btn1">注册</view>
			<view class="notice">
				登录注册代表您已阅读并同意《<text>用户协议</text>》
			</view>
		</view> -->
	</view>
</template>


<script>
	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
	import moveVerify from '../../components/helang-moveVerify/helang-moveVerify.vue'
	
	export default {
		components: {
			WucTab,
			moveVerify
		},
		data() {
			return {
				tabList2: [{
					name: '登录'
				}, {
					name: '注册'
				}],
				TabCur2: 1,
				
				showBtnStatus: false,
				account: '',
				password: '',
				captcha: '', // 验证码
				checkKey: '', // 
				
				smscode: '', // 短信验证码
				
				resultData: {},
				
				smsCodeTxt:'获取验证码',
				smsCodeTime: 60, // 60s倒计时
				showSmsCodeBtn: true, // 显示获取验证码按钮
				smsCodeStatus: true, 
			};
		},
		onLoad(e) {
			console.log(e)
			// this.getCheckCode();
		},
		onShow() {},
		computed: {},
		methods: {
			tabChange2(index) {
				this.TabCur2 = index;
			},
			isShow() {
				if (this.account&& this.password&& this.resultData.flag) {
					this.showBtnStatus = true;
				} else {
					this.showBtnStatus = false;
				}
			},
			// 聚焦
			onInput(e) {
				// console.log(e)
				this.isShow();
			},
			// 失去焦点
			blInput(e) {
				// console.log(e);
				this.isShow();
			},
			/* 滑动校验结果回调函数 */
			verifyResult(res){
				console.log(res);
				this.resultData = res;
				this.isShow();
			},
			/* 滑动校验插件重置 */
			verifyReset(){
				this.$refs.verifyElement.reset();
				/* 删除当前页面的数据 */
				this.resultData = {};
				this.isShow();
			},
			
			// 获取短信验证码
			bindGetCode(e) {
				console.log(this.$url);
				if (!this.account) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					});
				} else {
					// smsmode 0为登陆  1为注册
					if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.account))) {
						uni.showToast({
							title: '请填写正确手机号码',
							icon: "none"
						});
						return false;
					}
					uni.showLoading({
						title: "正在加载中..."
					})
					uni.request({
						url: this.$url + '/sys/appcussms',
						data: {
							mobile: this.account,
							smsmode: '1'
						},
						method: 'GET',
						success: res => {
							console.log(res);
							if(res.data.success){
								uni.hideLoading();
								uni.showToast({
									title: res.data.message,
									icon:'none',
									duration:1000
								});
								console.log('aaa1')
								this.timer = setInterval(() => {
									console.log('aaa')
								  if (this.smsCodeTime > 0) {
									  this.smsCodeStatus = false; // 是否能点击获取验证码的状态判断
									  this.smsCodeTxt ='重发验证('+(this.smsCodeTime - 1) + 's)';
									  this.smsCodeTime = this.smsCodeTime - 1; // 60s倒计时
								  } else {
									clearInterval(this.timer);
									  this.smsCodeTime = 60;
									  this.smsCodeTxt = '获取验证码';
									  this.smsCodeStatus = true;
								  }
								}, 1000);
							}else{
								uni.showToast({
									title:res.data.message,
									icon:'none',
									duration:1000
								})
							}
							
						},
						fail: res => {
							console.log("连接服务器异常");
						}
					});
				}
			},
			login() {
				if (!this.account) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration:1000
					});
					return false;
				}
				if(!this.smscode){
					uni.showToast({
						icon: 'none',
						title: '请输入短信验证码',
						duration:1000
					});
					return false;
				}
				let params = {
					phone: this.account,
					smscode: this.smscode
				}
				console.log(params);
				uni.request({
					url: this.$url + '/sys/cusphoneLogin',
					data: params,
					method: 'GET',
					success: (res) => {
						console.log(res);
						if (res.data.success) {
							console.log(res.data.result.token)
							uni.setStorageSync('ht_token', res.data.result.token);
							uni.setStorageSync('ht_phone', res.data.result.userInfo.phone);
							uni.switchTab({
								url:'/pages/index/index'
							})
						  } else {
							uni.showModal({
							  title: '提示',
							  content: res.data.message,
							  showCancel: false,
							})
							return false
						  }
					}
				})
			}
		},

		onReady() {}
	};
</script>


<style>
	div,
	scroll-view,
	swiper {
		box-sizing: border-box;
	}

	div {
		font-size: 28upx;

	}

	.a {
		margin-top: 70px;
		margin-left: -80px;
	}

	.swiper {
		height: 140upx;
	}

	.denglu {
		margin: 90rpx 60rpx 0;
	}

	.count {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 100rpx;
	}

	.username {
		border-bottom: 1rpx solid #EDEDF2;
	}

	.secret {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 100rpx;
	}

	.secret_input {
		border-bottom: 1rpx solid #EDEDF2;
	}

	.forget {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(37, 160, 255, 1);
		line-height: 100rpx;
		position: absolute;
		right: 0;
		margin-right: 60rpx;
	}

	.btn {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(90deg, rgba(37, 160, 255, 1), rgba(56, 196, 255, 1));
		opacity: 0.5;
		border-radius: 10rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 126rpx;
		margin-bottom: 30rpx;
	}
	.btn.active{
		opacity: 1;
	}

	.phone_text {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(37, 160, 255, 1);
		line-height: 100rpx;
		text-align: center;
	}

	.other {
		margin-top: 120rpx;
		text-align: center;
		color: #999999;
		display: flex;
	}

	.xian {
		width: 77px;
		height: 1px;
		background: rgba(230, 230, 230, 1);
		margin-top: 10px;
		margin-left: 20px;
		margin-right: 18px;
	}

	.other_text {
		font-size: 28rpx;
	}

	.wechat {
		margin: 50rpx 280rpx;
	}

	.wechat image {
		width: 70rpx;
		height: 70rpx;
	}

	.notice {
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		margin-bottom: 20rpx;
	}

	.notice text {
		color: #25A0FF;
	}

	.self {
		margin: 90rpx 60rpx 0;
	}

	.company {
		margin: 90rpx 60rpx 0;
	}

	.code {
		border-bottom: 1rpx solid #EDEDF2;
		display: flex;
	}

	.code text {
		position: absolute;
		right: 0;
		margin-right: 60rpx;
		color: #25A0FF;
		font-size: 28rpx;
	}

	.btn1 {
		width: 630rpx;
		height: 88rpx;
		background: linear-gradient(90deg, rgba(37, 160, 255, 1), rgba(56, 196, 255, 1));
		opacity: 0.5;
		border-radius: 10rpx;
		line-height: 88rpx;
		text-align: center;
		color: #FFFFFF;
		margin-top: 126rpx;
		margin-bottom: 160rpx;
	}
</style>
